<template>
	<view class="wrapper">
		<view aria-role="tab" class="margin-top shadow-lg radius" v-for="(item,index) in serviceList" :key="index"  @longpress="deleteShow(item)">
			<view class="height-w">
				<image class="img-w" style="width:221upx; height: 66upx;" :src="item.bankIc"></image>
				<text v-if="item.deftIs && item.deftIs == '1'" class='cu-tag bg-blue tag-f'>默认</text>
				<view class="text-grey font-s">{{item.bankNo}}</view>
			</view>
		</view>
		<view aria-role="tab" v-if="serviceList.length == 0">
			<no-data :src="img_src + 'zwyhk.png'">
				<view bindtap='a' class="text-gray">暂无银行卡信息</view>
				<view>赶紧添加一个吧</view>
			</no-data>
		</view>
		<button aria-role="button" class="add-btn bg-blue" @click="addBank">新增银行卡</button>
	</view>
</template>

<script>
	import noData from '@/components/nodata/no-data.vue'
	export default {
		data() {
			return {
				serviceList: [],
				img_src: this.$utils.SYS_URL + this.$utils.IMG_URL,
			}
		},
		components:{
			"no-data":noData
		},
		onLoad() {
			this.refreshList();
		},
		methods: {
			addBank(){
				uni.navigateTo({url: '/pages_mine/users/ubank-edit'})
			},
			//添加或修改成功之后回调
			refreshList() {
				const that = this
				this.serviceList = [];
				that.$request.getForm('/view/uacid/bank-list', {pageno:'1'}).then(res => {
					let list = res.data;
					for(let i = 0; i < list.length; i++){
						let n1 = list[i].bankNo.substr(0,4);
						let n2 = list[i].bankNo.substr(list[i].bankNo.length-4);
						list[i].bankNo = n1 + '**** **** ****' + n2;
						that.serviceList.push(list[i]);
					}
				})
			},
			deleteShow(item) {
				const that = this
				uni.showModal({
					title: '删除提示',
					content: '您确定要删除该银行卡吗？',
					showCancel: true,
					confirmText: '删除',
					success: (e) => {
						if (e.confirm) {
							that.$request.getForm('/view/uacid/bank-drop',{id:item.id}).then(res => {
								that.refreshList()
							})
						}
					},
					fail: () => {}
				})
			}
		}
	}
</script >
<style lang="scss">
	page {
		padding-bottom: 120upx;
		background: #fff;
	}
	.content {
		position: relative;
	}
	.text-wight {
		font-size: 15px;
		font-weight: 600px;
	}
	.img-w {
		margin: 20rpx;
	}
	.height-w {
		height:280upx;
		border: 1px solid transparent;
		border-color: rgba(151, 151, 151, 0.3);
		box-shadow: 0px 2px 10px rgba(41, 12, 127, 0.2);
		margin: 30upx;
		border-radius: 8px;
	}
	.font-s {
		font-size:60upx;
		padding: 30upx;
	}
	.tag-f {
		float: right;
		top: 16px;
		margin-right: 26px;
		border-radius: 10px
	}
	.add-btn {
		position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 16upx;
		z-index: 95;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		font-size: 32upx;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px;
	}
</style>
